<template>
	<view class="taskDetail">
		<view class="detailBox">
			<image v-if="pageData.image" :src="pageData.image" mode="" style="width: 200rpx;height: 200rpx;border-radius: 8rpx;"></image>
			<view class="leftBox">
				<view class="title">
					{{pageData.title}}
				</view>
				<view class="pingJ">
					<u-rate :count="count" v-model="value" active-color="#FF8F1F" readonly></u-rate>
				</view>
				<view class="time">
					截止时间:{{pageData.end_time}}
				</view>
			</view>
		</view>
		<view class="heng"></view>

		<view class="remarkBox">
			<view class="titleBox">
				<view class="line"></view>
				<view class="titleText">
					作业描述
				</view>
			</view>

			<view class="content">
				<u-parse :content="pageData.content"></u-parse>
				<!-- 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 -->
			</view>

		</view>

		<view v-if="pageData.reply!=null" class="replyBox">
			<view class="titleBox">
				<view class="line"></view>
				<view class="titleText">
					作业回复
				</view>
			</view>
			<view class="replyContent">
				{{pageData.reply.content}}
			</view>
			<view class="replyimgBox">
				<image v-for="(item,index) in pageData.reply.image" :src="item" mode=""
					style="width: 220rpx;height: 220rpx;border-radius: 10rpx;margin-right: 10rpx;"
					@click="handleImg(pageData.reply.image)"></image>
			</view>
			<view class="time">
				提交时间{{pageData.reply.created_at}}
			</view>
		</view>

		<view v-if="pageData.reply==null && identity == 0" class="bottomBtn" @click="handleReplyjob">
			立即回复
		</view>


	</view>
</template>

<script>
	import {
		taskDetails,
		userinfo
	} from "@/api/api.js"
	export default {
		data() {
			return {
				count: 5,
				value: 3,
				pageId: "",
				pageData: {},
				identity: "",
			}
		},
		onLoad(options) {
			// console.log("options", options.id)
			this.pageId = options.id
		},
		async onShow() {
			await this.handleuserinfo()
			await this.handletaskDetails()
		},
		methods: {
			async handletaskDetails() {
				let res = await taskDetails({
					id: this.pageId
				})
				this.pageData = res.data
				this.value = this.pageData.star
				this.pageData.reply.image = this.pageData.reply.image.split(',')
				// console.log("任务详情", this.pageData.reply.image)
			},
			async handleuserinfo() {
				let res = await userinfo()
				console.log("信息", res)
				this.identity = res.data.identity
			},
			handleReplyjob() {
				uni.navigateTo({
					url: `/pages/home/replyJob?id=${this.pageId}`
				})
			},

			handleImg(img) {
				uni.previewImage({
					current: 0, // 当前显示图片的链接（必填）
					urls: img, // 要预览的图片链接列表（必填）
					success() {
						// console.log('预览图片成功');
					},
					fail(err) {
						// console.log('预览图片失败', err);
					}
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.replyBox {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.replyContent {
			margin: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 33rpx;
		}

		.replyimgBox {
			width: 100%;

		}

		.time {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 33rpx;
			width: 100%;
			text-align: right;
			margin-top: 20rpx;
		}
	}

	.titleBox {
		margin-top: 30rpx;
		display: flex;
		align-items: center;

		.line {
			width: 8rpx;
			height: 28rpx;
			background: #255A9B;
			border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
			margin-right: 20rpx;
		}

		.titletext {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 00;
			color: #212121;
			line-height: 33rpx;
		}
	}

	.taskDetail {
		width: 100%;
		height: 100%;
		background-color: #ffffff;

		.detailBox {
			width: 100%;
			height: 260rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;

			// border-bottom: 1rpx solid #EEEEEE;
			.leftBox {
				margin-left: 20rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					width: 470rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #212121;
					line-height: 35rpx;
				}

				.pingJ {
					margin-top: 20rpx;
				}

				.time {
					margin-top: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 33rpx;
				}
			}
		}

		.heng {
			width: 690rpx;
			height: 1rpx;
			background-color: #EEEEEE;
			margin: 0 auto;
		}

		.remarkBox {
			padding: 0 30rpx;
			box-sizing: border-box;



			.content {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 33rpx;
				margin-top: 26rpx;
			}
		}


		.bottomBtn {
			width: 630rpx;
			height: 88rpx;
			background: #255A9B;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			position: absolute;
			bottom: 40rpx;
			margin-left: 60rpx;
		}
	}
</style>